<template>
  <div class="landao-section">
      <div class="section">
          <div class="section-top">
              <h1>门店推荐</h1>
              <p>好货正当时</p>
          </div>
          <div class="section-bottom">
              <ul>
                  <li v-for="(v,i) in arr" :key="i">
                      <img :src="v.img" alt="">
                      <h1>{{v.titlea}}</h1>
                      <span><b>￥{{v.b}}</b>{{v.span}}</span>
                      <a href="">
                          <van-icon name="cart-o" />
                      </a>
                  </li>
              </ul>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[
                {   
                    img:"/image/Sort/0.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/2.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/3.jpg",
                    titlea:"泰国直采金枕榴莲 整颗(散称)",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/4.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/5.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/0.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/2.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/3.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/4.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/5.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/0.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/2.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/3.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/4.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
                {   
                    img:"/image/Sort/5.jpg",
                    titlea:"柴鸡蛋10枚/盒",
                    b:"5.9",
                    span:"/盒"
                },
            ]
        }
    }
}
</script>

<style scoped>
    .landao-section{
        width: 100%;
        height: 2.6rem;
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .section{
        width: 90%;
        height: 2.45rem;
        /* background-color: rgb(248, 179, 185); */
        background: url(/image/Sort/13.jpg) no-repeat;
        background-size: 100% 100%;
        border-radius: 5px;
        overflow: hidden;
    }
    .section-top{
        width: 100%;
        height: 0.45rem;
        /* background-color: bisque; */
        display: flex;
        align-items: center;
    }
    .section-top>h1{
        font-size: 0.165rem;
        color: white;
        margin-left: 0.185rem;
        margin-right: 0.08rem;
        font-family: "黑体";
    }
    .section-top>p{
        width: 0.86rem;
        height: 0.21rem;
        background-color: #f09c7f;
        border-radius: 100px;
        text-align: center;
        line-height: 0.21rem;
        color: white;
        font-weight: bold;
        font-family: "黑体";
    }
    .section-bottom{
        width: 100%;
        height: 2rem;
        /* background-color: white; */
    }
    .section-bottom>ul{
        width: 100%;
        height: 100%;
        overflow-x: auto;
        display: flex;
    }
    .section-bottom>ul>li{
        width: 1.025rem;
        height: 1.9rem;
        background-color: white;
        border-radius: 10px;
        position: relative;
        margin: 0.05rem;
        margin-bottom: 0;
    }
    .section-bottom>ul>li>img{
        width: 0.875rem;
        height: 0.875rem;
        margin-left: 0.085rem;
        margin-bottom: 0.1rem;
        margin-top: 0.1rem;
    }
    .section-bottom>ul>li>h1{
        width: 100%;    
        font-size: 0.12rem;
        font-family: "黑体";
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .section-bottom>ul>li>span{
        color: #d0d0d0;
        position: absolute;
        bottom: 5%;
    }
    .section-bottom>ul>li>span>b{
        color: #eb5d3f;
    }
    .section-bottom>ul>li>a{
        display: inline-block;
        width: 0.2rem;
        height: 0.2rem;
        background-color: #4facf8;
        border-radius: 50%;
        position: absolute;
        right: 0;
        text-align: center;
        line-height: 0.25rem;
        color: white;
        position: absolute;
        bottom: 3%;
    }
</style>